<!--
 * @FileDescription: 拼单
 * @Author: Versient
 * @Date: 2024-12-07 15:02:30
 * @LastEditors: Versient
 * @LastEditTime: 2024-12-16 23:32:54
-->
<template>
  <view class="box">
    <image @click="backHandle" style="top: 53px" src="/static/show.png" mode="aspectFill" class="back" />

    <view class="content">
      <button open-type="share" class="btn">邀请好友</button>
      <view style="padding: 15px 50rpx">
        <view class="weiz" v-if="!!storeInfo">
          <image src="/static/icon/icon.png"></image>
          <view>
            <view class="weiz-top">{{ storeInfo.name }}</view>
            <view class="weiz-bot">距您{{ storeInfo.distance }}</view>
          </view>
        </view>
        <view class="dianc" v-if="carList.length == 0">
          <view class="store-status flex-store">
            <text>当前拼单{{ carList.length }}人</text>
            <text class="upload" @click="refreshPage(true)">刷新</text>
          </view>
          <view class="user-status">
            <image class="avatar"
              src="https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/15/202411151101113982.png"></image>
            <text class="user-text">微信好友 (我)</text>
            <text class="purchase-status">未选购</text>
          </view>
          <view class="order-box" @click="goGoods">
            <text class="order-button">立即点餐</text>
          </view>
        </view>

        <view class="dianc" v-else>
          <view class="store-status flex-store">
            <text>当前拼单{{ carList.length }}人</text>
            <text class="upload" @click="refreshPage(true)">刷新</text>
          </view>
          <view class="user-status">
            <image class="avatar"
              src="https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/15/202411151101113982.png"></image>
            <text class="user-text">微信好友 (我)</text>
            <text class="purchase-status">已选好</text>
          </view>
          <view class="product-item" v-for="item in carList" :key="item.id">
            <view style="display: flex; align-items: center">
              <image class="product-image" :src="item.data.icon" />
              <view class="product-details">
                <view class="product-name">{{ item.data.name }}</view>
                <view class="product-description">{{ item.data.attribute || "" }}</view>
              </view>
            </view>
            <view class="product-price">
              <view class="product-name">¥{{ item.data.totalMoney }}</view>
              <view class="product-description">×{{ item.data.num }}</view>
            </view>
          </view>
          <view class="order-box" @click="goGoods">
            <text class="order-button">修改订单</text>
          </view>
        </view>
      </view>

      <view
        class="cart-summary"
        :style="{ marginBottom: safeAreaTop + 'px' }"
        v-if="checkState"
      >
        <view class="cart-con">
          <view class="total-price">¥{{ price }}</view>
          <view class="price-note">优惠请以最终结算价格为准</view>
        </view>
        <view class="checkout-button" @click="checkout">结算</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      status: 2,
      safeAreaTop: 0,
      tableId: null,

      price: 0,
      carList: [],
      yjrV: "",
      yjTime: "",

      checkState: false,
      delivery: false,
    };
  },

  computed: {
    ...mapState({
      storeInfo: (state) => state.config.storeInfo,
    }),
  },

  onShareAppMessage(res) {
    return {
      title: "邀请好友助力",
      path: `/yb_wm/my/signin/share?tableId=${this.tableId}`,
      success: (res) => {
        console.log(`转发成功:${JSON.stringify(res)}`);
      },
      fail: function (res) {
        console.log(`转发失败:${JSON.stringify(res)}`);
      },
    };
  },

  async onLoad(options) {
    console.log("获取拼单参数", options);
    if (options.tableId) {
      this.tableId = options.tableId;
    } else {
      this.checkState = true;
      await this.getTableId();
      await this.refreshPage();
    }
  },

  onShow() {
    const systemInfo = wx.getSystemInfoSync();
    this.safeAreaTop = systemInfo.statusBarHeight - 25;
    this.refreshPage();
  },

  mounted() {
    uni.$on("refreshPage", () => {
      this.refreshPage();
    });
  },

  methods: {
    backHandle() {
      uni.reLaunch({ url: "/yb_wm/index/index" });
    },

    goGoods() {
      uni.navigateTo({
        url: `/yb_wm/index/shareGoods?tableId=${this.tableId}`,
      });
    },

    async checkout() {
      if (this.carList.length == 0) {
        this.util.message("还未选择商品请先选购", 3);
        return;
      }
      let { data } = await this.util.request({
        url: this.api.wmxzsj,
        data: {
          storeId: this.storeInfo.storeId,
          orderType: 2,
        },
      });
      if (data[0]) {
        const params = {
          storeId: this.storeInfo.id,
          tableId: this.tableId,
          serviceTime: data[0].time[0], //! 存在疑点问题，每个订单的下单时间不一致，如何判断呢？
        };
        if (this.delivery) {
          params.deliveryMode = 1; // 自提的字段值
        }
        let orderRes = await this.util.request({
          url: this.api["wmxd"],
          method: "POST",
          ct: 1,
          mask: "下单中",
          data: params,
        });
        if (orderRes) {
          // this.util.message('下单成功', 1)
          let lastPage = this.util.getPage();
          lastPage.$vm.refreshInfo(); //刷新点单页数据
          this.go({
            t: 2,
            url:
              "/yb_wm/other/mg-pay?payObj=" +
              encodeURIComponent(
                JSON.stringify({
                  orderId: orderRes.data,
                  orderType: 1,
                  info: {
                    money: this.price,
                    storeName: "一起拼单",
                    type: "下单支付",
                    go: {
                      t: 6,
                      url: "/yb_wm/index/order-index",
                    },
                  },
                })
              ),
          });
          uni.setStorageSync("note", this.params.userNote);
        } else {
          this.loading = false;
        }
      } else {
        uni.showModal({
          title: "提示",
          content: "此商家营业时间或预约单设置不合理，无有效的供用户选择的时间，无法下单",
          showCancel: false,
          success: (res) => {
            this.go({
              t: 4,
            });
          },
        });
      }
      uni.hideLoading();
      this.yjTime = data;
    },

    async refreshPage(state = false) {
      if (state) {
        uni.showLoading({ title: "加载中", duration: 800 });
      }
      const params = { storeId: this.storeInfo.id, tableId: this.tableId };
      const { code, msg, data } = await this.util.request({
        url: this.api.wdgwc,
        data: params,
      });
      if (code != 1) {
        this.util.message(msg, 1);
        return;
      }
      this.price = data.price || 0;
      this.carList = data.data || [];
      if (data.data.length > 0) {
        this.delivery = data.data[0].userAddId == "0";
      }
    },

    // 加载数据源
    async getTableId() {
      const { code, msg, data } = await this.util.request({ url: this.api.getTableId });
      if (code != 1) {
        this.util.message(msg, 1);
        return;
      }
      // this.util.message(msg, 3);
      this.tableId = data.tableId;
    },
  },
};

/**
 * ! 疑点：
 * * 1. 添加购物车 /order/save-shop-car
 * * - 参数 userAddId 地址问题，为啥在加购的时候要添加地址呢？
 * * - type 类型是啥，我具体应该传值是 1 吗？
 *
 * * 2. 添加订单
 * * - 参数 serviceTime 时间，两个人下单的时间是不一样的，具体以那个为主呢？
 * *   我应该传值多少呢？
 *
 * * 3. 原型图中
 * * - 存在当前人数 和 正在选购的人数，这个我应该如何确定？
 * https://console-docs.apipost.cn/preview/d6ea322e06ec4774/44ca318d952e9255?target_id=56f104d7-3909-4a50-8746-b7353fe3a3e2
 */
</script>

<style>
page {
  background-color: #f8f9fa;
}

.back {
  width: 50rpx;
  height: 50rpx;
  position: relative;
  left: 20rpx;
  transform: rotate(90deg);
}
.box {
  width: 100%;
  min-height: 100vh;
  /* background: #ffffff; */
}

.content {
  background: url(https://dc.wcb.icu/web/static/yb_wm/1/2024/11/15/202411151101113982.png);
  background-size: 100% 100%;
  width: 100%;
  height: 400rpx;
  padding-top: 70%;
}

.btn {
  width: 350rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background: #303030;
  border-radius: 50rpx;
  font-size: 32rpx;
  color: #ffffff;
  margin: 10px auto 0;
  font-weight: bold;
}

.weiz {
  display: flex;
  align-items: center;
  padding: 30rpx;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.weiz image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 20rpx;
}

.weiz-top {
  font-size: 28rpx;
  color: #202020;
}

.weiz-bot {
  font-size: 26rpx;
  color: #e3e3e3;
}

.dianc {
  padding: 30rpx;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  margin: 20rpx 0;
}

.store-status {
  padding: 10px 0;
  border-bottom: 1rpx solid #e5e5e5;
}

.store-status text {
  font-size: 14px;
  color: #666;
}

.flex-store {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload {
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  border: 1rpx solid #000000;
  border-radius: 20px;
  color: #000;
  font-size: 25rpx;
  text-align: center;
}

.user-status {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-text {
  font-size: 14px;
}

.purchase-status {
  margin-left: auto;
  color: #999;
}

.order-box {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.order-button {
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  border: 1rpx solid #000000;
  border-radius: 20px;
  color: #000;
  font-size: 25rpx;
  text-align: center;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}

.total-price {
  font-size: 18px;
  color: #333;
}

.checkout-button {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  margin-left: 30%;
}

.price-note {
  font-size: 12px;
  color: #999;
}

.product-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10px;
  margin-right: 20rpx;
}

.product-name {
  color: #111111;
  font-size: 32rpx;
}

.product-description {
  color: #cacaca;
  font-size: 28rpx;
  text-align: right;
}

.product-price {
}
</style>
